<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>添加文章</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="{__STATIC__}/layuiAdmin/layui/css/layui.css" rel="stylesheet">
	<link href="{__STATIC__}/layuiAdmin/adminui/dist/css/admin.css" rel="stylesheet">
	<link href="{__STATIC__}/layuiAdmin/style/style.css" rel="stylesheet">
	<style>
		html {background: #fff;padding-top: 20px;}
	</style>
</head>
<body>
	<div class="layui-form">
		<div class="layui-form-item">
			<label class="layui-form-label"><span>*</span> 标题：</label>
			<div class="layui-input-inline">
				<input type="text" name="m_title" lay-verify="required" placeholder="请输入标题" class="layui-input">
			</div>
			<div class="layui-form-mid layui-word-aux">文章标题</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span>*</span> 所属分类：</label>
			<div class="layui-input-inline">
				<select name="m_cat" lay-verify="required">
					<option value="">请选择所属分类</option>
					{volist name="catList" id="cat"}
					<option value="{$cat.id}">{gt name="$cat.parent_id" value="0"}&ensp;└&ensp;{/gt}{$cat.title}</option>
					{/volist}
				</select>
			</div>
			<div class="layui-form-mid layui-word-aux">文章分类</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">图片：</label>
			<div class="layui-input-inline">
				<input type="text" id="m_pic" name="m_pic" placeholder="请上传图片" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-btn-group">
				<button type="button" class="layui-btn layui-btn-info" id="btn_upload" style="padding-left: 10px;padding-right: 10px;">
					<i class="layui-icon">&#xe681;</i>上传
				</button>
				<button type="button" class="layui-btn layui-btn-info" id="btn_preview" style="padding-left: 10px;padding-right: 10px;">
					<i class="layui-icon">&#xe615;</i>预览
				</button>
			</div>
			<span style="display:none;" id="pic"><img id="yl_pic" src="/upload/pic/public/nopic.jpg"></span>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">作者：</label>
			<div class="layui-input-inline">
				<input type="text" name="m_source" placeholder="请输入文章作者" class="layui-input">
			</div>
			<div class="layui-form-mid layui-word-aux">文章作者</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">关键词：</label>
			<div class="layui-input-inline w400">
				<input type="text" name="m_keys" placeholder="请输入关键词" class="layui-input">
			</div>
			<div class="layui-form-mid layui-word-aux">显示在meta标签的Keywords中</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">SEO描述：</label>
			<div class="layui-input-inline w400">
				<input type="text" name="m_des" placeholder="请输入SEO描述" class="layui-input">
			</div>
			<div class="layui-form-mid layui-word-aux">显示在meta标签的Description中</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">摘要：</label>
			<div class="layui-input-block">
				<textarea name="m_summary" placeholder="请输入摘要" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">Tags：</label>
			<div class="layui-input-inline">
				<input type="text" name="m_tags" placeholder="请输入Tags" class="layui-input">
			</div>
			<div class="layui-form-mid layui-word-aux">多个标签请使用,分隔</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">内容：</label>
			<div class="layui-input-block">
				<textarea id="editor"></textarea>
				<textarea id="m_info" name="m_info" style="display: none;"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">外链地址：</label>
			<div class="layui-input-inline">
				<input type="text" name="m_url" placeholder="如：http://www.aaa.com" class="layui-input">
			</div>
			<div class="layui-form-mid layui-word-aux">添加外链后将直接跳转至此地址</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">人气：</label>
			<div class="layui-input-inline w80">
				<input type="number" name="m_hits" lay-verify="number" value="0" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">点赞数：</label>
			<div class="layui-input-inline w80">
				<input type="number" name="m_zan" lay-verify="number" value="0" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">排序：</label>
			<div class="layui-input-inline w80">
				<input type="number" name="m_px" lay-verify="number" value="1" class="layui-input">
			</div>
			<div class="layui-form-mid layui-word-aux">越大越靠前</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">是否推荐：</label>
			<div class="layui-input-block">
				<input type="checkbox" name="m_top" value="1" lay-skin="switch" lay-text="是|否">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">是否发布：</label>
			<div class="layui-input-block">
				<input type="checkbox" name="m_show" value="1" checked lay-skin="switch" lay-text="是|否">
			</div>
		</div>
		<div class="layui-form-item layui-hide">
			<input type="button" lay-submit lay-filter="LAY-submit" id="LAY-submit" value="确认">
		</div>
	</div>
</body>
</html>
<script src="{__STATIC__}/ckeditor5/ckeditor.js"></script>
<script src="{__STATIC__}/ckeditor5/upload.js"></script>
<script src="{__STATIC__}/layuiAdmin/layui/layui.js"></script>
<script>
	ClassicEditor
		.create(document.querySelector('#editor'), {
			placeholder:"在这里输入或粘贴内容",
			extraPlugins: [ MyCustomUploadAdapterPlugin ]
		})
		.then(editor => {
			window.editor = editor;
			//监听内容变化
			editor.model.document.on('change:data', function () {
				document.getElementById("m_info").value = editor.getData();
			});
		})
		.catch(error => {
			console.error(error);
		});

	function MyCustomUploadAdapterPlugin( editor ) {
		editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
			// 在这里将URL配置为后端上载脚本
			let url = "{:url('upload/index')}?dir=article";
			return new MyUploadAdapter( loader,url );
		};
	}

	layui.use(function(){
		let $ = layui.$;
		let upload = layui.upload;

		//上传
		upload.render({
			elem: '#btn_upload'
			,url: "{:url('upload/index')}"
			,data: {dir: 'article'}
			,accept: 'images'
			,before: function () {
				layer.load();
			}
			,done: function(res){
				layer.closeAll();
				if(res.code == 0) {
					$('#m_pic').val(res.data.file);
					$('#yl_pic').attr('src',res.data.src);
				}
				else {
					layer.msg(res.msg);
				}
			}
			,error: function(){
				layer.closeAll();
				layer.msg('请求异常');
			}
		});

		//预览
		$('#btn_preview').click(function () {
			layer.open({
				type: 1,
				shade: false,
				title: false,
				content: $('#pic')
			});
		});

	})
</script>